<template>
  <div>
    <myDivider :name="'入伙信息详情'"></myDivider>
    <el-page-header @back="$router.push('/Admission/AdmissionList')">
    </el-page-header>

    <el-form :model="ruleForm" ref="ruleForm" style="width: 600px;margin-top: 20px;" label-width="100px">
      <el-form-item label="房间信息：" prop="myRoonName">
        <div style="display: flex;">
          <el-input disabled maxlength="20" v-model="ruleForm.myRoonName"></el-input>

        </div>
      </el-form-item>
      <el-form-item label="客户信息：" prop="customerName">
        <div style="display: flex;">
          <el-input disabled maxlength="20" :value="ruleForm.customerName + ' ' + ruleForm.phone"></el-input>

        </div>

      </el-form-item>
      <el-row>
        <el-col :span="12">
          <el-form-item label="购房合同号：" prop="contractNumber">
            <el-input disabled style="width: 180px;" maxlength="20" v-model="ruleForm.contractNumber"></el-input>
          </el-form-item>

        </el-col>
        <el-col :span="12">
          <el-form-item label="入伙收费：" prop="registerCharge">
            <div style="display: flex;justify-content: space-between;">
              <el-input disabled style="width: 180px;"
                :value="ruleForm.registerCharge == 0 ? '' : ruleForm.registerCharge"></el-input>
              <span>元</span>
            </div>
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item label="钥匙发放：" prop="keyProvide">
        <el-input disabled v-model="ruleForm.keyProvide" maxlength="50" show-word-limit></el-input>
      </el-form-item>
      <el-form-item label="资料发放：" prop="informationProvide">
        <el-input disabled type="textarea" maxlength="100" show-word-limit :row="3"
          v-model="ruleForm.informationProvide"></el-input>
      </el-form-item>

      <el-form-item label="图片：" v-if="imgs.length > 0">
        <div class="imglist">
          <el-image class="el" style="width: 100px; height: 100px" v-for="item, i in imgs" :key="i" :src="item"
            :preview-src-list="imgs">
          </el-image>
        </div>
      </el-form-item>
      <el-form-item label="附件：" v-if="MyannexPathArr.length > 0">
        <div class="annexBox">
          <div class="annexList">
            <div class="el" v-for="item, i in MyannexPathArr" :key="i">
              <span>{{ item.name }}</span>
              <span @click="dow(item)">下载附件</span>
            </div>
          </div>
        </div>
      </el-form-item>
      <el-form-item label="入伙日期：" prop="admissionDate">
        <el-date-picker disabled value-format="yyyy.MM.dd" v-model="ruleForm.admissionDate" type="date">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="经办人：" prop="" required>
        <el-input disabled style="width: 200px;" v-model="ruleForm.createUserName"></el-input>
      </el-form-item>
      <el-form-item label="归档日期：">
        <el-input disabled style="width: 200px;" v-model="ruleForm.createTime"></el-input>
      </el-form-item>

    </el-form>



  </div>
</template>

<script>
import axios from 'axios';
export default {

  watch: {
    options(newVal) {
      this.keyValue++ //只要监听到数据源发生变化 ，改变keyValue的值，达到重新渲染的效果
    }
  },
  data() {
    return {
      // 表单相关
      ruleForm: {},
      keyValue: 0,//级联选择器key的渲染id
      options: [],//级联选择器回显的数据

      editCascaderVisible: false,
      MyannexPathArr: [],
      imgs: [],
    }
  },
  async activated() {
    this.editCascaderVisible = false

    //直接获取详情
    let res = await this.$api.customer.myAdmissionDetail(this.$route.query.id)
    if (res.code == 200) {
      console.log(res.data, '详细信息');
      this.ruleForm = res.data
      this.ruleForm.myRoonName = res.data.roomNamesArray.join('/')
      if (res.data.imagePaths) {
        this.imgs = res.data.imagePaths
      }
      this.MyannexPathArr = []
      if (res.data.annexPathArray) {
        res.data.annexPathArray.forEach(el => {
          let lastIndex = el.lastIndexOf('/')
          this.MyannexPathArr.push({
            name: el.slice(lastIndex + 1),
            url: el
          })
        })
      }
    }
    this.$nextTick(() => {
      this.$refs.ruleForm.clearValidate()
    })
  },
  methods: {
    dow(item) { //下载附件
 
      let soa_account = sessionStorage.getItem("soa_account");
      const token = sessionStorage.getItem("soa_token")
      axios({
        method: 'get',
        url:defaultUrl+ `/business/admission/downloadAnnex?filePath=${item.url}`,
        headers: {
          // 在这里添加自己需要的请求头
          account: soa_account,
          token: token,
        },
        responseType: 'blob'
      }).then(res => {
        const url = window.URL.createObjectURL(new Blob([res.data]))
        const a = document.createElement('a')
        a.href = url
        a.setAttribute('download',item.name)
        document.body.appendChild(a)
        a.click();
        document.body.removeChild(a)
      })
    },
  },
}
</script>

<style lang="less" scoped>
.imglist {
  .el {
    border-radius: 5px;
    overflow: hidden;
    margin-right: 10px;
  }
}
.btn {
  position: fixed;
  bottom: 10px;
  right: 70px;
}

.annexBox {
  width: 500px;

  .annexList {
    width: 100%;
    box-sizing: border-box;
    border-right: 3px solid rgb(23, 197, 255);

    .el {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;

      span {
        &:nth-child(1) {
          width: 300px;
          display: block;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        &:nth-child(2) {
          color: rgb(23, 197, 255);
          cursor: pointer;
          margin-right: 10px;
        }
      }
    }
  }

  .annexNone {
    color: #aaa;
  }
}
</style>